<template>
	<div class="cartcontrol">
		<transition name="move">
			<div class="iconfont icon-remove" v-if="food.count" @click.stop="undateFoodCount(false)"></div>
		</transition>
		<div class="cart-count" v-if="food.count">{{food.count}}</div>
		<div class="iconfont icon-add" @click.stop="undateFoodCount(true)"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		created() {
			
		},
		methods: {
			undateFoodCount(isAdd) {
				
				if(isAdd) {
					
					// 如果没有count这个属性就添加这个属性
					if(!this.food.count) {
						// this.food.count = 1  这种方式没有响应式数据变化
						/* 
						 对象
						 属性名
						 属性值
						 */
						// 方式一
						// Vue.set(this.food, 'count', 1)
						// 方式二
						this.$set(this.food, 'count', 1)
						
						
						this.cartFood.push(this.food)
						
					}else{
						this.food.count ++ 
					}
					
				}else{
					// 如果值不等于0就减减
					if(this.food.count) {
						this.food.count --
						
						if(this.food.count === 0) {
							this.cartFood.splice(this.cartFood.indexOf(this.food), 1)
						}
						
					}
				}
			},
		},
		props: {
			food: {
				type: Object
			},
			cartFood: {
				type: Array
			}
		}
	}
</script>

<style lang="less" scoped>
	.cartcontrol{
	  font-size: 0;
		position: absolute;
		bottom: 3%;
		right: 15px;
	  .icon-remove{
	    display: inline-block;
	    padding: 6px;
	    line-height: 20px;
	    font-size: 20px;
	    color: #03A774;
	    &.move-enter-active, &.move-leave-active{
	      transition: all .3s;
			}
	    &.move-enter, &.move-leave-to{
	      opacity: 0;
	      transform: translateX(30px) rotate(90deg);
			}
		}
	  .cart-count{
	    display: inline-block;
	    vertical-align: top;
	    width: 12px;
	    padding-top: 6px;
	    line-height: 20px;
	    text-align: center;
	    font-size: 10px;
	    color: rgb(147, 153, 159);
		}
	  .icon-add{
			display: inline-block;
			padding: 6px;
			line-height: 20px;
			font-size: 20px;
			color: #03A774;
		}
	}
</style>
